<template>
  <div class="my-input">
    MyInput: <input :value="value" @input="onInput">, value:{{ value }}
  </div>
</template>

<script>
export default {
  name: 'MyInput',
  props: ['value'],
  methods: {
    onInput (e) {
      // console.log(e.target.value)
      // this.$emit('changeValue', e.target.value)
      // 在 vue 里面，子传父时，有一个规则，如果子组件触发的事件名称符合 update:属性名 格式，
      // 那么，父组件可以在绑定属性名时，使用 属性名.sync 修饰符省略事件监听
      this.$emit('update:value', e.target.value)
    }
  }
}
</script>

<style>

</style>
